import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to console for debugging
    console.error('ErrorBoundary caught an error:', error, errorInfo);

    this.setState({
      error: error,
      errorInfo: errorInfo
    });
  }

  render() {
    if (this.state.hasError) {
      // Fallback UI
      return (
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          fontFamily: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
          textAlign: 'center',
          padding: '20px'
        }}>
          <div style={{
            background: 'rgba(255, 255, 255, 0.1)',
            backdropFilter: 'blur(10px)',
            borderRadius: '12px',
            padding: '40px',
            maxWidth: '600px',
            border: '1px solid rgba(255, 255, 255, 0.2)'
          }}>
            <h1 style={{ margin: '0 0 20px 0', fontSize: '2em' }}>
              🚁 Drone Application Error
            </h1>
            <p style={{ margin: '0 0 20px 0', fontSize: '1.1em', opacity: 0.9 }}>
              Something went wrong while loading the 3D scene.
            </p>
            <p style={{ margin: '0 0 30px 0', fontSize: '0.9em', opacity: 0.7 }}>
              This might be due to network connectivity issues or browser compatibility.
            </p>

            <button
              onClick={() => window.location.reload()}
              style={{
                background: 'linear-gradient(135deg, #3498db, #2980b9)',
                color: 'white',
                border: 'none',
                borderRadius: '8px',
                padding: '12px 24px',
                fontSize: '1em',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                marginRight: '10px'
              }}
              onMouseOver={(e) => {
                e.target.style.transform = 'translateY(-2px)';
                e.target.style.boxShadow = '0 4px 12px rgba(52, 152, 219, 0.3)';
              }}
              onMouseOut={(e) => {
                e.target.style.transform = 'translateY(0)';
                e.target.style.boxShadow = 'none';
              }}
            >
              🔄 Reload Application
            </button>

            {import.meta.env.DEV && (
              <details style={{
                marginTop: '20px',
                textAlign: 'left',
                background: 'rgba(0, 0, 0, 0.2)',
                padding: '15px',
                borderRadius: '8px',
                fontSize: '0.8em'
              }}>
                <summary style={{ cursor: 'pointer', marginBottom: '10px' }}>
                  🔍 Error Details (Development)
                </summary>
                <pre style={{
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  margin: 0,
                  color: '#ff6b6b'
                }}>
                  {this.state.error && this.state.error.toString()}
                  <br />
                  {this.state.errorInfo && this.state.errorInfo.componentStack}
                </pre>
              </details>
            )}

            <div style={{
              marginTop: '30px',
              fontSize: '0.8em',
              opacity: 0.6,
              borderTop: '1px solid rgba(255, 255, 255, 0.1)',
              paddingTop: '20px'
            }}>
              <p>💡 Troubleshooting tips:</p>
              <ul style={{ textAlign: 'left', margin: 0, paddingLeft: '20px' }}>
                <li>Check your internet connection</li>
                <li>Try refreshing the page</li>
                <li>Ensure your browser supports WebGL</li>
                <li>Disable browser extensions that might interfere</li>
              </ul>
            </div>
          </div>
        </div>
      );
    }

    // If no error, render children normally
    return this.props.children;
  }
}

export default ErrorBoundary;
